<template>
	<view class="login-bg">
		<view class="content">
			<view class="title_content animate__animated animate__fadeInDown">
				折果Blog
			</view>
			<!-- 登录卡片 -->
			<view class="login_card">
				<view class="header">
					<text class="title">欢迎回来</text>
					<text class="subtitle">开启你的创作之旅</text>
				</view>

				<view class="form">
					<!-- 用户名输入 -->
					<view class="input-group">
						<input class="input" placeholder="请输入用户名" placeholder-class="placeholder" v-model="username" />
						<image class="icon" src="/static/username.png" mode="aspectFit" />
					</view>

					<!-- 密码输入 -->
					<view class="input-group">
						<input class="input" type="password" placeholder="请输入密码" placeholder-class="placeholder"
							v-model="password" />
						<image class="icon" src="/static/password.png" mode="aspectFit" />
					</view>

					<!-- 登录按钮 -->
					<button class="login-btn" :class="{ active: isFormValid }" :disabled="!isFormValid"
						@click="handleLogin">
						立即登录
					</button>

					<!-- 辅助功能 -->
					<view class="actions">
						<text class="link">忘记密码?</text>
						<text class="divider">|</text>
						<text class="link">立即注册</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		login
	} from '../../api/api';

	const username = ref('')
	const password = ref('')

	const isFormValid = computed(() => {
		return username.value.length >= 3 && password.value.length >= 5
	})

	const handleLogin = async () => {
		const res = await login({
			login: username.value,
			password: password.value
		})

		if (res.token) {
			uni.showToast({
				title: '登录成功',
				icon: 'none'
			})

			// 把token存到本地缓存
			uni.setStorageSync('token', res.token)

			// 返回到首页
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 500)
			return
		}
	}
</script>

<style lang="scss" scoped>
	.login-bg {
		width: 100%;
		height: 100vh;
		background: linear-gradient(145deg,
				#fff2f6 0%, // 奶油粉
				#ffdeeb 30%, // 棉花糖粉
				#ffb3c8 70%, // 草莓粉
				#ff758f 100% // 珊瑚粉
			);
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content: center;

		.content {
			margin-top: 40%;
			width: 100vw;
			height: 100vh;

			.title_content {
				width: 100%;
				margin: 50rpx auto;
				text-align: center;
				font-size: 50rpx;
				height: 65rpx;
				line-height: 65rpx;
				font-weight: bold;
				letter-spacing: 4rpx;
				background: linear-gradient(135deg,
						#f891c3 0%,
						#ef5478 50%,
						#fca4c8 100%);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				text-shadow: 0 8rpx 16rpx rgba(56, 189, 248, 0.15);
				position: relative;
				display: inline-block;
				padding: 0 20rpx;
				transition: all 0.3s;

				/* 装饰线 */
				&::after {
					content: "";
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 80%;
					height: 6rpx;
					background: linear-gradient(90deg,
							rgba(30, 58, 138, 0) 0%,
							#ef708e 50%,
							rgba(30, 58, 138, 0) 100%);
					border-radius: 4rpx;
					opacity: 0.8;
					animation: lineFlow 2.5s infinite;
				}

				/* 悬浮效果 */
				&:active {
					transform: scale(0.96);
					text-shadow: 0 4rpx 12rpx rgba(56, 189, 248, 0.25);
				}
			}

			@keyframes lineFlow {
				0% {
					width: 60%;
					opacity: 0.6;
				}

				50% {
					width: 90%;
					opacity: 1;
				}

				100% {
					width: 60%;
					opacity: 0.6;
				}
			}

			.login_card {
				margin: 30rpx auto;
				width: 85%;
				box-sizing: border-box;
				height: 800rpx;
				padding: 60rpx 40rpx;
				background: rgba(255, 255, 255, 0.95);
				border-radius: 32rpx;
				box-shadow: 0 20rpx 60rpx rgba(206, 71, 148, 0.1);
				backdrop-filter: blur(20px);
				z-index: 1;

				.header {
					margin-bottom: 80rpx;

					.title {
						display: block;
						font-size: 48rpx;
						font-weight: 600;
						color: #ef4a89;
					}

					.subtitle {
						font-size: 28rpx;
						color: #f591a4;
					}
				}

				.input-group {
					position: relative;
					margin-bottom: 50rpx;

					.icon {
						position: absolute;
						left: 24rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 40rpx;
						height: 40rpx;
						opacity: 0.6;
					}

					.input {
						height: 100rpx;
						padding: 0 80rpx;
						background: #f8fafc;
						border-radius: 16rpx;
						font-size: 32rpx;
						transition: all 0.3s;

						&:focus {
							background: #fff;
							box-shadow: 0 0 0 2rpx #bae6fd;
						}
					}

					.placeholder {
						color: #94a3b8;
					}
				}

				.login-btn {
					height: 100rpx;
					background: #ef5478;
					color: #ffffff;
					font-size: 35rpx;
					font-weight: bold;
					border-radius: 16rpx;
					transition: all 0.3s;

					&.active {
						background: linear-gradient(45deg, #ef608e, #d3718b);
						color: #fff;
						box-shadow: 0 10rpx 30rpx rgba(230, 38, 125, 0.3);
					}

					&[disabled] {
						opacity: 0.7;
					}
				}

				.actions {
					margin-top: 50rpx;
					display: flex;
					justify-content: center;
					gap: 30rpx;

					.link {
						color: #ef5478;
						font-size: 28rpx;

						&:active {
							opacity: 0.7;
						}
					}

					.divider {
						color: #ef5478;
					}
				}
			}
		}
	}

	/* 添加动态波纹效果 */
	.login-bg::after {
		content: "";
		position: absolute;
		bottom: -20%;
		left: -10%;
		width: 120%;
		height: 40%;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 45%;
		animation: wave 8s infinite linear;
	}

	@keyframes wave {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>